@import '../../../styles/_commonColor.scss';


* {
  box-sizing: border-box;
  line-height: inherit;
}
.noOrderDetails{
  &:after{///清楚浮动
    display: table;
    content: '';
    clear: both;
  }
  height: 100vh;
  background: #fff;
  //background: #f5f5f5;
  .headerContent{
    background-color:  #EEF3FB;
    padding:60px 30px 30px 40px;
    .headerMessage{
      width: 100%;
      position: relative;
      .arrowItem{
        justify-content: center;
        &>div{
          &:nth-child(1){
            flex: inherit;
          }
          &:nth-child(2){
            background: url('../../../images/icon_enter_blue.png') no-repeat center;
            background-size: 18px 24px;
          }
        }
      }
      p{
        color: #76A5DA;
        font-size: 26px;
        text-align: justify;
        min-height: 35px;
        margin-top: 16px;
        display: flex;
        justify-content: center;
      }
      .alreadyPaid{
        font-size: 34px;
        color: $blue;
        flex:1;
        padding-right: 12px;
        text-align: center;
      }
    }

    .btn_inspection{
      margin:46px 0 0 0;
      font-size: 34px;
      color: $white;
      background-color: $blue;
      border: 1PX solid $blue;
      border-radius: 6px;
    }
     .btn_inspection_white{
      margin:46px 0 0 0;
      font-size: 34px;
      color: $blue;
      background-color: $white;
      border:1PX solid $blue;
      border-radius: 6px;
    }
  }

  .unableHeaderContent{
    background-color:  #78768B;
    .headerMessage {
      .arrowItem{
        &>div{
          &:nth-child(2){
            background: url('../../../images/icon_enter_white.png') no-repeat center;
            background-size: 18px 24px;
          }
        }
      }
      p {
        color: $white;
      }
      .alreadyPaid {
        color: $white;
      }
    }
  }

  .process{
    &:after{///清楚浮动
      display: table;
      content: '';
      clear: both;
    }
    //padding: 30px 30px 30px 30px;
    background: $white;

    .processOuter{
      padding: 30px 30px 0 30px;
    }
/*    .z_progress{  //邮政六步流程
      width: 100%;
      text-align: center;
      padding: 25px 30px 0 30px;
        span{
          width: 16.5%;
          height: 8px;
          display: inline-block;
          position: relative;

        }
      }

    .x_progress{  //自主五步流程
      width: 100%;
      text-align: center;
      padding: 30px 30px 0 30px;
      span{
        width: 20%;
        height: 8px;
        background: #D8D8D8;
        display: inline-block;
        position: relative;
      }
    }*/

    //邮政 6步
    .success_no_a{ //失败的订单
      span{
        &:nth-child(1){
          display: inline-block;
          background: url('../../../images/progress/yz_1.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(2){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(3){
          display: inline-block;
          background: url('../../../images/autonomy/zz_no.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(4){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(5){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(6){
          display: inline-block;
          background: url('../../../images/progress/yz_3.png') no-repeat center;
          background-size: 100%;
        }
      }
    }

    //自主 5步
/*    .success_no_b{ //失败的订单
      span{
        &:nth-child(1){
          display: inline-block;
          background: url('../../../images/progress/yz_1.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(2){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(3){
          display: inline-block;
          background: url('../../../images/autonomy/zz_no.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(4){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(5){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
      }
    }

    ///邮政6步流程
    .success_a{  //邮政
      span{
        &:nth-child(1){
          display: inline-block;
          background: url('../../../images/progress/yz_1.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(2){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(3){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(4){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(5){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(6){
          display: inline-block;
          background: url('../../../images/progress/yz_3.png') no-repeat center;
          background-size: 100%;
        }
      }
    }
    .success_b{
      span{
        &:nth-child(1){
          display: inline-block;
          background: url('../../../images/progress/yz_1.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(2){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(3){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(4){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(5){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(6){
          display: inline-block;
          background: url('../../../images/progress/yz_3.png') no-repeat center;
          background-size: 100%;
        }
      }

    }
    .success_c{
      span{
        &:nth-child(1){
          display: inline-block;
          background: url('../../../images/progress/yz_1.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(2){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(3){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(4){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(5){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(6){
          display: inline-block;
          background: url('../../../images/progress/yz_3.png') no-repeat center;
          background-size: 100%;
        }
      }
    }
    .success_d{
      span{
        &:nth-child(1){
          display: inline-block;
          background: url('../../../images/progress/yz_1.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(2){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(3){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(4){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(5){
          display: inline-block;
          background: url('../../../images/progress/yz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(6){
          display: inline-block;
          background: url('../../../images/progress/yz_3.png') no-repeat center;
          background-size: 100%;
        }
      }
    }
    .success_e{
      span{
        &:nth-child(1){
          display: inline-block;
          background: url('../../../images/progress/yz_1.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(2){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(3){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(4){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(5){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(6){
          display: inline-block;
          background: url('../../../images/progress/yz_3.png') no-repeat center;
          background-size: 100%;
        }
      }
    }
    .success_f{
      span{
        &:nth-child(1){
          display: inline-block;
          background: url('../../../images/progress/yz_1.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(2){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(3){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(4){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(5){
          display: inline-block;
          background: url('../../../images/progress/yz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(6){
          display: inline-block;
          background: url('../../../images/progress/yz_2b.png') no-repeat center;
          background-size: 100%;
        }
      }
    }

    //自主5步流程
    .success_b_a{
      span{
        &:nth-child(1){
          display: inline-block;
          background: url('../../../images/autonomy/zz_1.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(2){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(3){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(4){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(5){
          display: inline-block;
          background: url('../../../images/autonomy/zz_3.png') no-repeat center;
          background-size: 100%;
        }
      }

    }
    .success_b_b{
      span{
        &:nth-child(1){
          display: inline-block;
          background: url('../../../images/autonomy/zz_1.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(2){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(3){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(4){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(5){
          display: inline-block;
          background: url('../../../images/autonomy/zz_3.png') no-repeat center;
          background-size: 100%;
        }
      }

    }
    .success_b_c{
      span{
        &:nth-child(1){
          display: inline-block;
          background: url('../../../images/autonomy/zz_1.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(2){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(3){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(4){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(5){
          display: inline-block;
          background: url('../../../images/autonomy/zz_3.png') no-repeat center;
          background-size: 100%;
        }
      }

    }
    .success_b_d{
      span{
        &:nth-child(1){
          display: inline-block;
          background: url('../../../images/autonomy/zz_1.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(2){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(3){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(4){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(5){
          display: inline-block;
          background: url('../../../images/autonomy/zz_3.png') no-repeat center;
          background-size: 100%;
        }
      }

    }
    .success_b_e{
      span{
        &:nth-child(1){
          display: inline-block;
          background: url('../../../images/autonomy/zz_1.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(2){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(3){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(4){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2a.png') no-repeat center;
          background-size: 100%;
        }
        &:nth-child(5){
          display: inline-block;
          background: url('../../../images/autonomy/zz_2b.png') no-repeat center;
          background-size: 100%;
        }
      }

    }*/
  }
.detailContent {
  padding:0 30px;
  .technological {
    border-bottom: 1PX dotted $bordergray;
    padding: 28px 30px 10px 0;
    background: #fff;
    min-height: 147px;
    li {
      margin-bottom: 10px;
      color: $gray;
      font-size: 24px;
      &:first-child {
        color: $black;
        font-size: 30px;
      }
      &:last-child {
        margin-bottom: 0 !important;
      }
    }
  }
  .mailAndDriveTypeItem {
    padding:30px 0;
    border-bottom: solid 1PX #F0F0F0;
    font-size: 26px;
    color:$black;
    &>div {
      display: flex;
      align-items: center;
      &:nth-child(2){
        margin-top: 10px;
      }
      div {
        &:nth-child(1) {
          flex: 1;
        }
        &:nth-child(3) {
          margin-left: 10px;
        }
      }
      img {
        display: block;
        width: 32px;
        height: 32px;
      }
    }
  }
  .cost {
    &:after { ///清楚浮动
      display: table;
      content: '';
      clear: both;
    }
    background: $white;
    ul {
      font-size: 26px;
      &:after { ///清楚浮动
        display: table;
        content: '';
        clear: both;
      }
      padding: 28px 0 24px;
      border-bottom: 1PX dotted $bordergray;
      li {
        &:after { ///清楚浮动
          display: table;
          content: '';
          clear: both;
        }
        margin-bottom: 18px;
        color: $black;
        font-size: 26px;
        span {
          &:first-child {
            float: left;
          }
          &:last-child {
            float: right;
          }
        }

        &:last-child {
          color: $black;
          margin-bottom: 0 !important;
          font-size: 30px !important;
          span {
            &:first-child {
              float: left;
            }
            &:last-child {
              float: right;
            }
          }
        }
      }
      &:nth-child(2) {
        border-bottom: 1PX solid #F0F0F0;
        li {
          margin-bottom: 0;
          span {
            &:first-child {
              color: $black;
              font-size: 30px;
            }
            &:last-child {
              color: $warningRed;
              font-size: 30px;
            }
          }
        }
      }
    }
    .OrderDetails {
      padding: 24px 0;
      p {
        font-size: 24px;
        color: $gray;
        line-height: 36px;
      }
    }
  }
}
}
